import { useMemo, useState } from 'react'
import { Button, Radio, Spin, Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { importExcel } from '@/api/batchQuery.ts'
import { message } from '@hs-admin/utils'

export const useAddByImport = (
  id: string,
  resetCall: () => void,
  mainTableFields: Array<{
    label: string
    value: string
  }>
) => {
  const [upData, setUpData] = useState(new FormData())

  const [loading, setLoading] = useState(false)

  const checkedValue = upData.get('search_filed')

  return useMemo(
    () => ({
      children: (
        <Spin spinning={loading}>
          <div className="flex gap-4">
            <div className="flex gap-4 flex-col">
              <h1>第一步：上传清单</h1>
              <div>
                <Upload
                  accept=".xls,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                  maxCount={1}
                  fileList={upData.get('file') ? [upData.get('file')] : null}
                  onRemove={() => {
                    setUpData((prevState) => {
                      const newFormData = new FormData()
                      const search_filed = prevState.get('search_filed')
                      if (search_filed) newFormData.set('search_filed', search_filed)
                      return newFormData
                    })
                  }}
                  beforeUpload={(file) => {
                    setUpData((prevState) => {
                      const newFormData = new FormData()
                      const search_filed = prevState.get('search_filed')
                      newFormData.set('file', file)
                      if (search_filed) newFormData.set('search_filed', search_filed)
                      return newFormData
                    })
                    return false
                  }}>
                  <Button icon={<UploadOutlined />}>选择要上传的Excel文件</Button>
                </Upload>
              </div>
              <p className="text-red-6">
                注意：
                <br />
                1、上传xls或xlsx格式文件
                <br />
                2、系统只会读取文件第一个sheet中的第一列
                <br />
                3、数据量不要超过5000条
                <br />
                4、系统会从第一行开始读，所以不要有表头
                <br />
                5、需选择具有唯一性的字段，如公司名称，公司ID,如果匹配多个将不会返回
              </p>
            </div>
            <div>
              <h1>第二步：选择比对的字段</h1>
              <div>
                <Radio.Group
                  value={checkedValue}
                  options={mainTableFields}
                  onChange={(e) => {
                    setUpData((prevState) => {
                      const newFormData = new FormData()
                      const file = prevState.get('file')
                      newFormData.set('search_filed', e.target.value)
                      if (file) newFormData.set('file', file)
                      return newFormData
                    })
                  }}
                />
              </div>
            </div>
          </div>
        </Spin>
      ),
      onOk: async () => {
        if (loading) {
          message.warning('上传中')
          return false
        }

        try {
          if (!upData.get('file')) {
            message.error('请选择文件')
            return false
          }
          if (!upData.get('search_filed')) {
            message.error('请选择字段')
            return false
          }
          setLoading(true)
          await importExcel(id, upData)
          message.success('上传成功')
          resetCall()
          return true
        } catch (e) {
          console.log(e)
          return false
        } finally {
          setLoading(false)
        }
      },
      onCancel: () => {
        console.log('取消')
      },
      title: '导入清单',
      onOpen: () => {
        setUpData(new FormData())
      }
    }),
    [checkedValue, id, loading, mainTableFields, resetCall, upData]
  )
}
